<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="order-box">
					<view class="order-info-text">编号：{{orderInfo.order_no}}</view>
					<view class="order-info-text" v-if="orderInfo.order_type!='boss'&&orderInfo.order_type!='about_ball'">
						用户：{{orderInfo.nickname}} {{orderInfo.mobile}} 
						<text style="margin-left: 30upx;color: #EEC162;" @tap="copy()">复制</text> 
					</view>
					<view class="order-info-text" v-if="orderInfo.order_type=='about_ball'">
						用户：{{orderInfo.nickname}} {{orderInfo.mobile}} 
						<text style="margin:0 20upx;">VS</text> 
						用户：{{orderInfo.b_nickname||'--'}} {{orderInfo.b_mobile||'--'}} 
					</view>
					<view class="order-info-text">桌号：{{orderInfo.shop_name}}-{{orderInfo.store_equipment_name}}</view>
					<view class="order-info-text" v-if="orderInfo.order_type=='boss'">订单类型：先打后付</view>
					<view class="order-info-text" v-else>
						订单类型：
						<block v-if="orderInfo.order_type=='immediately'">立刻开台</block>
						<block v-if="orderInfo.order_type=='make_appointment'">预约开台</block>
						<block v-if="orderInfo.order_type=='other_packages'">其他套餐</block>
						<block v-if="orderInfo.order_type=='about_ball'">同城约球</block>
						{{orderInfo.quantity}}小时
					</view>
					<view class="order-info-text">已选时间：{{orderInfo.service_date}} {{orderInfo.start_time}} <text v-if="orderInfo.end_time">～</text><text v-if="orderInfo.is_ci==1">次日</text> {{orderInfo.end_time}}</view>
					<view class="order-info-text">下单时间：{{orderInfo.createtime}}</view>
					<view class="order-info-text">订单金额：¥{{orderInfo.total_pay_money||'--'}}</view>
					<block v-if="orderInfo.order_type=='about_ball'">
						<view class="order-info-text">约球类型：
							<block v-if="orderInfo.about_ball_type==1">抢台费</block>
							<block v-if="orderInfo.about_ball_type==2">我买单</block>
							<block v-if="orderInfo.about_ball_type==3">AA支付</block>
						</view>
						<view class="order-info-text">邀约方付款方式：{{orderInfo.payment_status_a==1?'微信支付':'--'}}</view>
						<view class="order-info-text">邀约方付款金额：{{orderInfo.payment_party_a}}</view>
						<view class="order-info-text">邀约方付款时间：{{orderInfo.payment_time_a}}</view>
						<view class="order-info-text">应约方付款方式：{{orderInfo.payment_status_b==1?'微信支付':'--'}}</view>
						<view class="order-info-text">应约方付款金额：{{orderInfo.payment_party_b||'--'}}</view>
						<view class="order-info-text">应约方付款时间：{{orderInfo.payment_time_b||'--'}}</view>
					</block>
					<view class="order-info-text" v-if="orderInfo.order_type!='about_ball'">优惠卡券：-¥{{orderInfo.coupon_deduction_money||0}}</view>
					<view class="order-info-text" v-if="orderInfo.payment_method==6">通卡优惠：-¥{{orderInfo.coupon_deduction_money||0}}</view>
					<view class="order-info-text"  v-if="orderInfo.order_type!='about_ball'">实付金额：¥{{orderInfo.actual_payment||'--'}}</view>
					<block v-if="orderInfo.payment_method==3||orderInfo.payment_method==4">
						<view class="order-info-text">团单金额：¥{{orderInfo.reality_price||'--'}}</view>
						<!-- <view class="order-info-text">券名称：{{orderInfo.reality_price||'--'}}</view>
						<view class="order-info-text">券码：{{orderInfo.reality_price||'--'}}</view> -->
						<view class="order-info-text">美团/抖音订单号：{{orderInfo.meituan_order_no||'--'}}</view>
						<view class="order-info-text">核销时间：{{orderInfo.payment_time||'--'}}</view>
					</block>
					<view class="order-info-text" v-if="orderInfo.payment_status==1">
						付款方式：
						<block v-if="orderInfo.payment_method==1">微信支付</block>
						<block v-if="orderInfo.payment_method==2">充值抵扣</block>
						<block v-if="orderInfo.payment_method==3">美团验劵</block>
						<block v-if="orderInfo.payment_method==4">抖音验券</block>
						<block v-if="orderInfo.payment_method==6">通卡支付</block>
					</view>
					<view class="order-info-text"  v-if="orderInfo.order_type!='about_ball'">支付时间：{{orderInfo.payment_time}}</view>
					<view class="order-info-text">开始时间：{{orderInfo.service_start_time}}</view>
					<view class="order-info-text">结束时间：{{orderInfo.service_end_time||'--'}}</view>
					<view class="order-info-text" v-if="orderInfo.order_status!=30">订单状态：{{orderInfo.order_status==0?"待使用":orderInfo.order_status==10?"使用中":"已完成"}}</view>
					<block v-if="orderInfo.order_status==30">
						<view class="order-info-text">订单状态：已取消</view>
					</block>
					<block v-if="orderInfo.refund_status==1">
						<view class="order-info-text">退款金额：{{orderInfo.refund_money||0}}</view>
						<view class="order-info-text">退款时间：{{orderInfo.refund_time||'无'}}</view>
					</block>
					<view class="order-info-text">备注：{{orderInfo.remarks||'暂无备注'}}</view>
					<block v-if="orderInfo.order_type=='about_ball'">
						<view class="order-info-text">邀约方退款金额：{{orderInfo.refund_money_a||"--"}}</view>
						<view class="order-info-text">应约方退款金额：{{orderInfo.refund_money_b||"--"}}</view>
					</block>
					<view class="btn-box flexWrapNo">
						<block v-if="orderInfo.order_status==0">
							<view class="cancel-btn" @tap="openModel(2)">取消订单</view>
							<view @tap="openModel(1)">换桌</view>
							<view @tap="openModel(0)">改时间</view>
						</block>
						<block v-if="orderInfo.order_status==10">
							<view v-if="orderInfo.order_type=='boss'" @tap="goPage('/pages/manage/confirmOrder?order_id='+orderInfo.id)">关灯/结算</view>
							<view class="cancel-btn" @tap="openModel(3)" v-else>结束订单</view>
							<view @tap="openModel(1)">换桌</view>
						</block>
					</view>
					<view class="btn-box" style="padding:0;" v-if="orderInfo.order_status==10&&orderInfo.order_type=='boss'">
						<view style="width: 300upx;" @tap="directFinish">无需付款，直接结束订单</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="cancelFlag" style="height: 300upx;">
					<view class="tips-name">是否取消订单？</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="cancelOrders()">确定</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="finishFlag&&orderInfo.payment_method!=3" style="height: 500upx;">
					<view class="tips-name">是否结束订单？</view>
					<view class="tips-text">退款金额:</view>
					<view class="input-box">
						<input placeholder="输入退款金额" placeholder-class="placeholderClass" v-model="refund_money" type="digit"/>
					</view>
					<view class="tips-text" style="text-align: center;">本订单最大可退款金额为{{orderInfo.actual_payment}}</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="cancelOrders()">确定</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="finishFlag&&orderInfo.payment_method==3" style="height: 500upx;">
					<view class="tips-name">是否结束订单？</view>
					<view class="tips-text" style="text-align: center;margin: 20upx 0;">本订单金额为{{orderInfo.total_pay_money}}</view>
					<view class="tips-text">是否计入美团收入:</view>
					<view class="operation-box flexWrapNo">
						<view class="operation-item flexWrapNo" @tap="changeSelect(0)">
							<image src="../../static/order/select-icon.png" class="operation-icon" v-if="selectIndex==0"></image>
							<image src="../../static/order/notselect-icon.png" class="operation-icon" v-else></image>
							计入
						</view>
						<view class="operation-item flexWrapNo" @tap="changeSelect(1)">
							<image src="../../static/order/select-icon.png" class="operation-icon" v-if="selectIndex==1"></image>
							<image src="../../static/order/notselect-icon.png" class="operation-icon" v-else></image>
							不计入
						</view>
					</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="cancelOrders()">确定</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="changetimeFlag">
					<view class="tips-name">改时间</view>
					<view class="tips-text" style="font-size: 24rpx;margin-top: 20upx;margin-bottom: 8upx;">
						订单时间：{{orderInfo.service_date}} {{orderInfo.start_time}}～<text v-if="orderInfo.is_ci==1">次日</text> {{orderInfo.end_time}}
					</view>
					<view class="tips-text">将开始时间改为：</view>
					<view class="flexWrapNo" style="margin-top: 40upx;">
						<view class="input-box" style="width: 220upx;">
							<picker mode="date" :data-index='0' :value="starDate" @change="bindDateChange">
								<view class="flexWrapNo">
									<view class="select-input" v-if="starDate">{{starDate}}</view>
									<view class="select-input" v-else>请选择日期</view>
									<text class="triangle"></text>
								</view>
							</picker>
						</view>
						<view class="line"></view>
						<view class="input-box" style="width: 140upx;margin-top: 0;">
							<picker mode="time" :data-index='1' :value="starTime" @change="bindDateChange">
								<view class="flexWrapNo">
									<view class="select-input" v-if="starTime">{{starTime}}</view>
									<view class="select-input" v-else>时间</view>
									<text class="triangle"></text>
								</view>
							</picker>
						</view>
					</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="changeTime()">确定</view>
					</view>
				</view>
				<view class="tips-box tips-box1 flexWarpCenterColumn" v-if="modelFlag">
					<view class="tips-name">换桌</view>
					<view class="tips-text">将订单移动到：</view>
					<view class="input-box">
						<picker :value="equipmentTitle" @change="changeEquipment" :range="selectEquipmentList" range-key="equipment_name">
							<view class="flexWrapNo">
								<view class="select-input" v-if="equipmentTitle">{{equipmentTitle}}</view>
								<view class="select-input" v-else>请选择台桌</view>
								<text class="triangle"></text>
							</view>
						</picker>
					</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeModel()">取消</view>
						<view class="tips-btn noStarted" @tap="changeTable()">确定</view>
					</view>
				</view>
				<view class="mask-box" v-if="modelFlag||changetimeFlag||cancelFlag||finishFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				order_id:"",
				orderInfo:{
					nickname:'加载中...',
					mobile:'加载中...',
					actual_payment: "0.00",
					coupon_deduction_money: "0.00",
					coupon_title: "加载中...",
					createtime: "加载中...",
					order_no: "加载中...",
					order_status: 10,
					order_type: "immediately",
					payment_method: 2,
					payment_status: 1,
					payment_time: "加载中...",
					platform_commission: "0.00",
					quantity: 0,
					recharge_consumption: "0.00",
					refund_money: "加载中...",
					refund_time: "加载中...",
					service_end_time: "加载中...",
					service_start_time: "加载中...",
					start_time:'加载中...',
					end_time:"加载中...",
					service_date: "加载中...",
					shop_name: "加载中...",
					store_equipment_name: "加载中...",
					total_pay_money: "加载中...",
					updatetime: "加载中...",
				},
				modelFlag:false,
				changetimeFlag:false,
				cancelFlag:false,
				finishFlag:false,
				selectEquipmentList:[],
				equipmentId:"",
				equipmentTitle:"",
				starTime:"",
				starDate:"",
				refund_money:"",
				selectIndex:0
			}
		},
		onLoad(ops) {
			this.order_id=ops.order_id
			this.orderDetails();
			this.getSelectEquipmentList();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			directFinish(){
				uni.showModal({
					title: '提示',
					content:"是否直接结束订单",
					success: (res) => {
						this.$request.post(this.$api.directFinish, {
							order_id:this.order_id,
							store_id:uni.getStorageSync('store_id'),
							equipment_id:this.orderInfo.store_equipment_id
						}, {
							token:true
						}).then(res => {
							if (res.code == 1) {
								let {
									data = {}
								} = res;
								this.orderDetails();
								this.$tools.showToast('结束成功');
							}
						})
					}
				});
			},
			copy(){
				let that = this
				uni.setClipboardData({
					data: that.orderInfo.mobile,
					success: function() {
						console.log('success');
					}
				});
			},
			changeSelect(index){
				this.selectIndex=index
			},
			changeEquipment(e) {
				this.equipmentTitle =this.selectEquipmentList[e.target.value].equipment_name
				this.equipmentId=this.selectEquipmentList[e.target.value].id
			},
			bindDateChange(e) {
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.starDate = e.target.value
				} else {
					this.starTime = e.target.value
				}
			},
			closeModel(){
				this.modelFlag=false
				this.changetimeFlag=false
				this.cancelFlag=false
				this.finishFlag=false
			},
			openModel(index){
				if(index==0){
					this.changetimeFlag=true
				}else if(index==1){
					this.modelFlag=true
				}else if(index==2){
					this.cancelFlag=true
				}else if(index==3){
					this.finishFlag=true
				}
			},
			// 取消订单
			cancelOrders(){
				if(this.refund_money>this.orderInfo.actual_payment){
					this.$tools.showToast('退款金额不能大于实付金额');
					return;
				}
				this.$request.post(this.$api.cancelOrders, {
					order_id:this.order_id,
					refund_money:this.refund_money
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						if(this.selectIndex==1){
							this.meituanIncome();
						}
						this.closeModel();
						this.orderDetails();
						this.$tools.showToast('取消成功');
					}
				})
			},
			// 是否计入美团收入
			meituanIncome(){
				this.$request.post(this.$api.meituanIncome, {
					order_id:this.order_id,
					is_meituan_income:1
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						
					}
				})
			},
			// 改时间
			changeTime(){
				this.$request.post(this.$api.changeTime, {
					order_id:this.order_id,
					start_time:this.starDate+' '+this.starTime
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.closeModel();
						this.orderDetails();
						this.$tools.showToast('修改成功');
					}
				})
			},
			// 换桌
			changeTable(){
				if(!this.equipmentId){
					this.$tools.showToast('请选择台桌后进行操作');
					return;
				}
				this.$request.post(this.$api.changeTable, {
					order_id:this.order_id,
					store_equipment_id:this.equipmentId
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.selectEquipmentList=data
						this.closeModel();
						this.orderDetails();
						this.$tools.showToast('换桌成功');
					}
				})
			},
			getSelectEquipmentList(){
				this.$request.post(this.$api.selectEquipmentList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.selectEquipmentList=data
					}
				})
			},
			orderDetails(){
				this.$request.post(this.$api.orderDetails, {
					order_id:this.order_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.orderInfo=data
						this.orderInfo.createtime = this.$tools.formatDate(this.orderInfo.createtime)
						this.orderInfo.service_start_time = this.$tools.formatDate(this.orderInfo.service_start_time)
						this.orderInfo.service_end_time = this.orderInfo.service_end_time?this.$tools.formatDate(this.orderInfo.service_end_time):""
						this.orderInfo.payment_time =this.orderInfo.payment_time?this.$tools.formatDate(this.orderInfo.payment_time):"--"
						this.orderInfo.payment_time_a =this.orderInfo.payment_time_a?this.$tools.formatDate(this.orderInfo.payment_time_a):"--"
						this.orderInfo.payment_time_b =this.orderInfo.payment_time_b?this.$tools.formatDate(this.orderInfo.payment_time_b):"--"
						this.orderInfo.service_date=this.orderInfo.service_start_time.split(' ')[0]
						this.orderInfo.start_time=this.orderInfo.service_start_time.split(' ')[1]
						this.orderInfo.end_time=this.orderInfo.service_end_time?this.orderInfo.service_end_time.split(' ')[1]:''
						if(this.orderInfo.refund_status==1){
							this.orderInfo.refund_time = this.$tools.formatDate(this.orderInfo.refund_time)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-box{
		padding: 44upx;
		.order-info-text{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 54upx;
			color: #6E6E6E;
		}
		.btn-box{
			padding: 52upx 0;
			view{
				min-width: 194rpx;
				height: 66rpx;
				background: #EEC162;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 66rpx;
				text-align: center;
				margin-right: 30upx;
			}
			.cancel-btn{
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #EEC162;
				border: 2rpx solid #EEC162;
				background-color: transparent;
			}
		}
	}
	.tips-box1{
		height: 450upx !important;
	}
	.tips-box{
		width: 660upx;
		height:552upx;
		background:#fff;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #333;
			margin-top: 44upx;
		}
		.tips-text{
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #6E6E6E;
			width: 560upx;
			margin-top: 12upx;
		}
		.line{
			width: 30upx;
			height: 2upx;
			background-color: #fff;
			margin: 0 20upx;
		}
		.operation-box{
			width: 560upx;
			margin-top: 32upx;
			.operation-item{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 40upx;
				.operation-icon{
					width: 48upx;
					height: 48upx;
					margin-right: 10upx;
				}
			}
		}
		.input-box{
			height: 100upx;
			width: 500upx;
			background: #F7F7F7;
			border-radius: 16upx;
			padding: 0 32upx;
			margin-top: 34upx;
			.triangle{
				border-top-color: #FFFFFF;
			}
			&:nth-of-type(1){
				margin-top: 0;
			}
			input{
				height: 100upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:#333;
			}
			.select-input{
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:#333;
				flex: auto;
			}
			.placeholderClass{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:rgba(255,255,255,.5);
			}
		}
		.btn-box{
			margin-top: 56upx;
			.tips-btn{
				width: 260upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #EEC162;
				border-radius: 16upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #EEC162;
			}
			.noStarted{
				color: #333;
				background-color: #EEC162;
				margin-left: 28upx;
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
